﻿<!DOCTYPE html>
<html lang="en">

<head>
    <title>跨浏览器调用高拍仪测试demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        video,
        #canvas,
        #canvas1 {
            width: 300px;
            height: 300px;
            position: absolute;
        }


        .MainDown {
            display: flex;
            flex-direction: row;
            height: 800px;
        }

        .btnNone {
            background-color: cadetblue;
            pointer-events: none;
        }

        .btnZC {
            background-color: red;
        }

        .descInputRed {
            background-color: red;
        }

        .descInputGreen {
            background-color: greenyellow;
        }
    </style>
</head>

<script src="jquery.min.js"></script>
<script src="js/tracking-min.js"></script>
<script src="js/face-min.js"></script>
<!-- 人脸识别部分 -->
<script>
    function VerificaPic() {
        $.ajax({
            // url: 'https://faceidcardb.shumaidata.com/getfaceidb',
            url: 'https://vidface.market.alicloudapi.com/lundear/idface',
            data: {
                'idcard': document.getElementById("certNumber").value,
                'image': document.getElementById("CameraPhoto").src,
                // 'image': document.getElementById("CameraIDs").src,
                'name': document.getElementById("partyName").value
            },
            headers: { 'Authorization': 'APPCODE 40fef2cc01184ee78196e9039a3932b6', 'contentType': 'application/x-www-form-urlencoded; charset=utf-8' },
            type: "post",
            success: function (data) {
                console.log(data);
                document.getElementById("ReturnCode").value = data.code;
                document.getElementById("Returndesc").value = data.desc;
                if (data.code === 0) {
                    document.getElementById("Returndesc").setAttribute("class", "descInputGreen");
                } else {
                    document.getElementById("Returndesc").setAttribute("class", "descInputRed");
                }

            }
        });
    };  
</script>

<body>
    <!-- 摄像展示要用video标签 -->
    <div style="height:280px">
        <video id="video" preload autoplay loop muted></video>
        <canvas id="canvas" width="300px" height="300px"></canvas>
        <canvas id="canvas1" width="600px" height="400px"></canvas>
    </div>

    <div>
        <div style="display:flex;flex-direction: column;">
            <canvas id="shortCut" style="display: none;"></canvas>
            <img id="CameraPhoto" src="takeapicture.png"
                style="width: 300px;height: 300px;border: 1px solid white; background:white;" />
            <!-- <img id="CameraPhoto" src="takeapicture.png"
            style="width: 200px;height: 200px;border: 1px solid white; background:white;" /> -->
            姓名 <input type="text" name="" id="partyName" style="width: 196px;" value="周宾">
            身份证号 <input type="text" name="" id="certNumber" style="width: 196px;" value="370125199108176313">
            <input type="text" name="" id="ReturnCode" style="display: none;">
            识别结果
            <!-- <input type="text" name="" id="Returndesc" style="width: 300px;" readonly> -->
            <textarea name="" id="Returndesc" cols="30" rows="3" style="width: 196px;" readonly></textarea>
            <input type="number" name="identifynums" id="identifynums" value="0" style="display: none;">
            <input type="button" class="btnZC" id="btnPaiZhao"
                style="width:200px;margin-top: 20px;height: 50px;background: red;color: wheat;font-size: 30px;display: none; "
                value="开始识别" onclick="drawMedia();" />


        </div>
    </div>
</body>


<script>
    var saveArray = {};
    window.onload = function () {
        var video = document.getElementById('video');
        var canvas = document.getElementById('canvas');//动态跟踪的框
        var context = canvas.getContext('2d');

        var tracker = new tracking.ObjectTracker('face');

        tracker.setInitialScale(4);
        tracker.setStepSize(2);
        tracker.setEdgesDensity(0.1);

        tracking.track('#video', tracker, { camera: true });

        tracker.on('track', function (event) {
            context.clearRect(0, 0, canvas.width, canvas.height);

            event.data.forEach(function (rect) {
                context.strokeStyle = '#fff';
                context.strokeRect(rect.x, rect.y, rect.width, rect.height);

                context.fillStyle = "#fff";
                // context.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11);
                // context.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22);
                //console.log(rect.x, rect.width, rect.y, rect.height);
                saveArray.x = rect.x;
                saveArray.y = rect.y;
                saveArray.width = rect.width;
                saveArray.height = rect.height;
            });
        });
        setInterval(function () {
            //console.log(saveArray);
            if (saveArray.x > 80 &&
                saveArray.x + saveArray.width < 300 &&
                saveArray.y > 20 &&
                saveArray.y + saveArray.height < 220 &&
                saveArray.width < 180
                && saveArray.height < 180) {
                console.log(saveArray);
                getPhoto();
                for (var key in saveArray) {
                    delete saveArray[key];
                }
            }
        }, 2000);
        function getPhoto() {
            context2.drawImage(video, 210, 130, 350, 350, 0, 0, 300, 200); //将video对象内指定的区域捕捉绘制到画布上指定的区域，实现拍照。 
            document.getElementById("CameraPhoto").setAttribute("src", convertCanvasToImage(can).src);
            var code = document.getElementById("ReturnCode").value;
            var idcard = document.getElementById("certNumber").value;
            var personName = document.getElementById("partyName").value;

            if (idcard !== "" && personName !== "") {
                //VerificaPic();
            } else {
                document.getElementById("Returndesc").setAttribute("class", "descInputRed");
                if (idcard === "") {
                    document.getElementById("Returndesc").value = "身份证号不能为空";
                }
                if (personName === "") {
                    document.getElementById("Returndesc").value = "姓名不能为空";
                }
            }
             
        }

        var canvas1 = document.getElementById('canvas1');
        var context1 = canvas1.getContext('2d');
        var can = document.getElementById('shortCut');

        var context2 = can.getContext('2d');
        context1.strokeStyle = "#69fff1";
        context1.moveTo(190, 118);
        context1.lineTo(390, 118);
        context1.lineTo(390, 318);
        context1.lineTo(190, 318);
        context1.lineTo(190, 118);
        context1.stroke();

        var img = document.getElementById("img")
        //将canvas转化为图片
        function convertCanvasToImage(canvas) {
            var image = new Image();
            image.src = canvas.toDataURL("image/png");
            return image;
        }
    };

</script>

</html>